import React from 'react';
import { Modal } from 'antd';
import Input from "../../../Component/Input/Input";
import {Row, Icon} from "antd";
import Logo from '../../../Common/svg/Logo';
import RoundButton from "../../../Component/RoundButton/RoundButton";
import SvgPhone from "../../../Common/svg/LoginPhone";
import './index.css';
import "../Common/index.css";

export default class BindPhone extends React.Component {
    constructor(props){
      super();
      this.state = {
        visible: true,
      };
    }
    showModal = () => {
      this.setState({
        visible: true,
      });
    };
  
    handleOk = () => {
      this.setState({ loading: true });
      setTimeout(() => {
        this.setState({ loading: false, visible: false });
      }, 3000);
    };
  
    handleCancel = () => {
      this.setState({ visible: false });
    };
      render() {
        return (
            <div>
              <Modal
                visible={this.state.visible}
                title="绑定手机号"
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                footer={null}
              >
                <div className="Modal_Content_Out">
                <div>
                    <Logo width="133" height="99"/>
                </div>
                <Row className="Modal_Content_Phone">
                    <Input
                        type={"plain"}
                        placeholder={"手机号"}
                        prefix={<Icon component={SvgPhone}/>}
                        autoComplete={"username"}
                    />
                </Row>
                <Row className="Modal_Content_Verification">
                    <Input
                        type={"plain"}
                        placeholder={"验证码"}
                        prefix={<Icon component={SvgPhone}/>}
                        autoComplete={"username"}
                    />
                    <span className="Modal_Content_Code">发送验证码</span>
                </Row>
                <Row className={"Login_Button"}>
                    <RoundButton text={"确定提交"}/>
                </Row>
              </div>
              </Modal>
            </div>
        );
      }
  }